<template>
  <transition name="slide-fade">
    <div v-if="visible" class="file-upload">
      <flexbox ref="refTest" class="file-upload__header">
        <div class="title">附件上传</div>
        <div>
          <el-button :icon="unfoldIcon" class="unfold-button" @click="unfoldClick"/>
          <el-button icon="el-icon-close" class="close-button" @click="close"/>
        </div>
      </flexbox>
      <div v-show="isUnfold" class="file-upload__body">
        <WkUploadCell v-for="(item, index) in uploadList"
                      :key="index"
                      :index="index"
                      :file="item.file"
                      :request="item.request"
                      :params="item.params"
                      :complete="item.complete"
                      @completed="uploadCompleted"
                      @delete="uploadDelete"
                      @cancelTokenChange="cancelTokenChange"/>
      </div>
    </div>
  </transition>
</template>

<script setup>
import {ref, computed} from "vue"
import WkUploadCell from './WkUploadCell.vue'
import {ElButton} from "element-plus"


defineOptions({
  // 文件上传
  name: 'FileUploadMain',
})

const visible = ref(false)
const isUnfold = ref(true)
const uploadList = ref([])

const unfoldIcon = computed(() => {
  return isUnfold.value ? 'el-icon-minus' : 'el-icon-plus'
})


/**
 * data 必须包含  file
 * 可选 request  params
 * data 辅助信息
 */
const upload = (data) => {
  visible.value = true
  return new Promise((resolve, reject) => { // eslint-disable-line
    uploadList.value.push({
      ...data,
      complete: false,
      resolve: resolve,
      reject: reject
    })
  })
}

const close = () => {
  let allComplete = true
  for (let index = 0; index < uploadList.value.length; index++) {
    const element = uploadList.value[index]
    if (!element.complete) {
      allComplete = false
      break
    }
  }

  if (allComplete) {
    uploadList.value = []
    visible.value = false
  } else {
    ElMessageBox.confirm('关闭窗口，将取消上传任务，是否继续?', '提示', {
      confirmButtonText: '继续',
      cancelButtonText: '取消',
      type: 'warning'
    })
        .then(() => {
          for (let index = 0; index < uploadList.value.length; index++) {
            const element = uploadList.value[index]
            if (element.cancelToken) {
              element.cancelToken()
            }
          }

          uploadList.value = []
          visible.value = false
        })
        .catch(() => {
          isUnfold.value = false
        })
  }
}

const unfoldClick = () => {
  isUnfold.value = !isUnfold.value
}

/**
 * 上传完成
 */
const uploadCompleted = (index, res) => {
  const data = uploadList.value[index]
  data.res = res
  data.complete = true
  if (data.resolve) {
    data.resolve(data)
  }
}

const uploadDelete = (index) => {
  uploadList.value.splice(index, 1)
}

const cancelTokenChange = (cancelToken, index) => {
  const data = uploadList.value[index]
  // this.$set(data, 'cancelToken', cancelToken)
  data['cancelToken'] = cancelToken
}

defineExpose({
  upload
})

</script>


<script>
export default {
  components: {
    // WkUploadCell
  },
  props: {},
  data() {
    return {}
  },
  computed: {},
  watch: {},
  mounted() {
  },
  beforeDestroy() {
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
.slide-fade-enter-active,
.slide-fade-leave-active {
  will-change: transform;
  transition: all 0.35s ease;
}

.slide-fade-enter,
.slide-fade-leave-to {
  transform: translateY(100%);
}

.file-upload {
  position: fixed;
  bottom: 0px;
  right: 0px;
  width: 380px;
  background-color: white;
  z-index: 1000000;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
  border-radius: 4px;
  border: 1px solid #ebeef5;
  font-size: 14px;

  &__header {
    padding: 5px 15px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
    height: 40px;

    .title {
      flex: 1;
      font-weight: bold;
    }

    .el-button {
      border: none;
      outline: none;
      background: transparent;
      font-weight: bold;
      padding: 6px;
      margin-left: 0;

      :deep(i) {
        font-size: 15px;
        font-weight: bold;
      }
    }
  }

  &__body {
    height: 350px;
    overflow-y: auto;
    padding: 10px;

    .wk-upload-cell + .wk-upload-cell {
      margin-top: 10px;
    }
  }
}
</style>
